<template>
  <common-header page-title="国家助农政策" />
  <div class="container">
    <!-- 政策宣传区块 -->
    <section class="section-block policy-section">
      <div class="section-header">
        <h2 class="section-title">
          <i class="el-icon-document"></i>
          <span class="title-text">惠农政策宣传</span>
          <span class="title-decoration"></span>
        </h2>
        <el-button
            type="text"
            @click="$router.push({ name: 'PolicyPage' })"
            class="more-btn"
        >
          查看更多 <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
      <el-card class="policy-card" shadow="hover">
        <el-row :gutter="30" class="policy-row">
          <el-col
              v-for="(item, index) in policyArr.slice(0, 8)"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
          >
            <el-card
                class="policy-item"
                shadow="hover"
                :body-style="{ padding: '20px' }"
                @click="$router.push({ name: 'PolicyDetail', params: { id: item.id } })"
            >
              <div class="policy-content">
<!--                <div class="policy-icon">
                  <i class="el-icon-document-checked"></i>
                </div>-->
                <h3 class="policy-title">{{ item.title }}</h3>
                <p class="policy-text">{{ item.content }}</p>
                <div class="policy-source">
                  <el-tag effect="dark" type="success" size="mini">{{ item.source }}</el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </section>

    <!-- 助农故事区块 -->
    <section class="section-block story-section">
      <div class="section-header">
        <h2 class="section-title">
          <i class="el-icon-video-camera"></i>
          <span class="title-text">乡村振兴故事</span>
          <span class="title-decoration"></span>
        </h2>
        <el-button
            type="text"
            @click="$router.push({ name: 'StoryPage' })"
            class="more-btn"
        >
          查看更多 <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
      <el-card class="story-card" shadow="hover">
        <el-row :gutter="30" class="story-row">
          <el-col
              v-for="(item, index) in storyArr.slice(0, 8)"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
          >
            <el-card
                class="story-item"
                shadow="hover"
                :body-style="{ padding: '0' }"
                @click="$router.push({ name: 'StoryDetail', params: { id: item.id } })"
            >
              <div class="story-content">
                <div class="media-wrapper">
                  <img
                      :src="item.image"
                      class="story-image"
                      alt="助农故事图片"
                  />
                  <div class="image-overlay"></div>
                </div>
                <div class="story-content-text">
                  <h3 class="story-title">{{ item.title }}</h3>
                  <p class="story-text">{{ item.content }}</p>
                  <div class="story-footer">
                    <span class="source">{{ item.source }}</span>
                    <el-button type="primary" size="mini" plain round>查看详情</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </section>

    <!-- 农产品区块 -->
    <section class="section-block product-section">
      <div class="section-header">
        <h2 class="section-title">
          <i class="el-icon-goods"></i>
          <span class="title-text">特色农产品推荐</span>
          <span class="title-decoration"></span>
        </h2>
        <el-button
            type="text"
            @click="$router.push({ name: 'ProductPage' })"
            class="more-btn"
        >
          查看更多 <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
      <el-card class="product-card" shadow="hover">
        <el-row :gutter="30" class="product-row">
          <el-col
              v-for="(item, index) in productArr.slice(0, 8)"
              :key="index"
              :xs="24"
              :sm="12"
              :md="8"
              :lg="6"
          >
            <el-card
                class="product-item"
                shadow="hover"
                :body-style="{ padding: '16px', opacity: item.stock === 0 ? 0.5 : 1 }"
                :style="{
                  cursor: item.stock === 0 ? 'not-allowed' : 'pointer'
                }"
                @click="item.stock !== 0 ? handleProductClick(item) : null"
            >
              <div class="product-content">
                <div class="product-badge" v-if="item.stock <= 10 && item.stock > 0">
                  <span>仅剩{{ item.stock }}件</span>
                </div>
                <div class="product-image">
                  <img :src="item.imageUrls" alt="商品图片" class="product-img" />
                </div>
                <h3 class="product-name">{{ item.name }}</h3>
                <div class="price-wrapper">
                  <span class="current-price">¥{{ item.price }}</span>
                </div>
                <div class="product-info">
                  <el-tag type="warning" size="mini" effect="dark">销量 {{ item.sales }}</el-tag>
                  <el-tag :type="item.stock > 0 ? 'success' : 'danger'" size="mini" effect="dark">
                    {{ item.stock > 0 ? '有货' : '售罄' }}
                  </el-tag>
                </div>
                <div class="button-wrapper">
                  <el-button
                      v-if="item.stock <= 0"
                      type="info"
                      size="mini"
                      disabled
                      round
                  >已售罄</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import request from "@/utils/request"
import { ElMessage } from "element-plus"
import { useRoute, useRouter } from "vue-router"
import CommonHeader from "@/views/user/support/components/CommonHeader.vue"

const router = useRouter()
const route = useRoute()

// 政策数据
const policyArr = ref([])
// 故事数据
const storyArr = ref([])
// 商品数据
const productArr = ref([])

// 加载国家政策的方法
const loadPolicy = () => {
  request.get("/api/v1/government/public/get")
      .then(res => {
        if (res.code === 2000 && Array.isArray(res.data)) {
          policyArr.value = res.data.slice(0, 10)
        } else {
          ElMessage.error(res.msg || "政策加载失败")
        }
      })
      .catch(err => {
        console.error("加载政策异常:", err)
        ElMessage.error("网络异常，请检查后端服务是否启动")
      })
}

// 加载助农宣传故事的方法
const loadStory = () => {
  request.get("/api/v1/government/private/sel")
      .then(res => {
        if (res.code === 2000 && Array.isArray(res.data)) {
          storyArr.value = res.data.slice(0, 10)
        } else {
          ElMessage.error(res.msg || "故事加载失败")
        }
      })
      .catch(err => {
        console.error("加载故事异常:", err)
        //ElMessage.error("网络异常，请检查后端服务是否启动")
      })
}

// 加载助农商品的方法
const loadProduct = () => {
  request.get("/api/v1/government/public/list")
      .then(res => {
        if (res.code === 2000 && Array.isArray(res.data)) {
          productArr.value = res.data.slice(0, 10)
        } else {
          ElMessage.error(res.msg || "商品加载失败")
        }
      })
      .catch(err => {
        console.error("加载商品异常:", err)
        //ElMessage.error("网络异常，请检查后端服务是否启动")
      })
}

const handleProductClick = (item) => {
  if (!item || !item.id) {
    alert("该商品暂无详情");
    return;
  }
  router.push({
    path: '/product/detail',
    query: { id: item.id }
  });
}

onMounted(() => {
  loadPolicy()
  loadStory()
  loadProduct()
})
</script>

<style scoped lang="scss">
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background: linear-gradient(to bottom, #f8fdf5 0%, #e9f7ef 100%);
  min-height: calc(100vh - 60px);
}

/* ========== 通用区块样式 =========== */
.section-block {
  margin-bottom: 60px;
  position: relative;
  padding: 30px;
  background: white;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid rgba(103, 194, 58, 0.08);
  overflow: hidden;

  &:hover {
    box-shadow: 0 16px 32px rgba(103, 194, 58, 0.12);
    transform: translateY(-3px);
  }

  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(103, 194, 58, 0.3), transparent);
  }

  &:last-child::before {
    display: none;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
  position: relative;
  padding-bottom: 18px;
}

.section-title {
  margin: 0;
  font-size: 2rem;
  color: #2c3e50;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 600;

  i {
    margin-right: 18px;
    color: #67C23A;
    font-size: 2em;
    background: linear-gradient(45deg, #409EFF, #67C23A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .title-text {
    position: relative;
    z-index: 1;
    padding-right: 18px;
    background: white;
  }

  .title-decoration {
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 100%;
    height: 10px;
    background: rgba(103, 194, 58, 0.2);
    z-index: 0;
    border-radius: 5px;
  }
}

.more-btn {
  font-size: 15px;
  color: #67C23A !important;
  transition: all 0.3s;
  font-weight: 500;
  letter-spacing: 0.8px;
  position: relative;
  padding-bottom: 3px;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: #67C23A;
    transition: width 0.3s;
  }

  i {
    margin-left: 8px;
    transition: transform 0.3s;
  }

  &:hover {
    color: #409EFF !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &::after {
      width: 100%;
    }

    i {
      transform: translateX(3px);
    }
  }
}

/* ========== 卡片通用样式 =========== */
.policy-card,
.story-card,
.product-card {
  border-radius: 14px;
  border: none;
  overflow: hidden;
  transition: all 0.3s;
  background: transparent;

  &:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  }
}

.policy-row,
.story-row,
.product-row {
  margin-bottom: -30px;
}

/* ========== 政策卡片样式 =========== */
.policy-item {
  height: 100%;
  border-radius: 12px;
  margin-bottom: 30px;
  transition: all 0.3s;
  border: none;
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid rgba(103, 194, 58, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 20px;
  box-sizing: border-box;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(103, 194, 58, 0.15);
    border-color: rgba(103, 194, 58, 0.3);

    .policy-icon i {
      transform: scale(1.1);
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #409EFF, #67C23A);
  }
}

.policy-content {
  position: relative;
  z-index: 1;
}

.policy-icon {
  width: 60px;
  height: 60px;
  background: rgba(103, 194, 58, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;

  i {
    font-size: 28px;
    color: #67C23A;
    transition: transform 0.3s;
  }
}

.policy-title {
  color: #2c3e50;
  font-size: 1.2rem;
  margin-bottom: 18px;
  line-height: 1.5;
  font-weight: 600;
  background: linear-gradient(to right, #2c3e50, #67C23A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.policy-text {
  color: #606266;
  font-size: 1rem;
  line-height: 1.7;
  height: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}

.policy-source {
  text-align: right;
}

/* ========== 故事卡片样式 =========== */
.story-item {
  height: 100%;
  border-radius: 12px;
  margin-bottom: 30px;
  transition: all 0.3s;
  border: none;
  overflow: hidden;
  position: relative;
  background: white;
  border: 1px solid rgba(103, 194, 58, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(103, 194, 58, 0.15);
    border-color: rgba(103, 194, 58, 0.3);

    .story-image {
      transform: scale(1.05);
    }

    .image-overlay {
      opacity: 0.25;
    }
  }
}

.story-content {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.media-wrapper {
  width: 100%;
  height: 200px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
}

.story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #409EFF, #67C23A);
  opacity: 0.3;
  transition: opacity 0.3s;
}

.story-content-text {
  flex: 1;
  padding: 0 20px 20px;
}

.story-title {
  color: #2c3e50;
  font-size: 1.2rem;
  margin-bottom: 15px;
  line-height: 1.5;
  font-weight: 600;
  background: linear-gradient(to right, #2c3e50, #67C23A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.story-text {
  color: #606266;
  font-size: 1rem;
  line-height: 1.7;
  height: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}

.story-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;

  .source {
    font-size: 0.9rem;
    color: #909399;
    font-weight: 500;
  }
}

/* ========== 商品卡片样式 =========== */
.product-item {
  height: 100%;
  border-radius: 12px;
  margin-bottom: 30px;
  transition: all 0.3s;
  border: none;
  position: relative;
  background: white;
  border: 1px solid rgba(245, 108, 108, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding: 20px;
  box-sizing: border-box;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(245, 108, 108, 0.15);
    border-color: rgba(245, 108, 108, 0.3);

    .product-img {
      transform: scale(1.05);
    }
  }
}

.product-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #F56C6C;
  color: white;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.product-content {
  position: relative;
}

.product-image {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.5s;
}

.product-name {
  color: #2c3e50;
  font-size: 1.2rem;
  margin-bottom: 15px;
  line-height: 1.5;
  font-weight: 600;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  background: linear-gradient(to right, #2c3e50, #F56C6C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-wrapper {
  margin: 20px 0;

  .current-price {
    color: #f56c6c;
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
  }
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.button-wrapper {
  margin-top: 20px;
  text-align: center;
}

/* ========== 动画效果 =========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-block {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.policy-section { animation-delay: 0.1s; }
.story-section { animation-delay: 0.2s; }
.product-section { animation-delay: 0.3s; }

/* ========== 响应式布局 =========== */
@media (max-width: 992px) {
  .container {
    padding: 30px 15px;
  }

  .section-block {
    padding: 25px;
    margin-bottom: 50px;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .media-wrapper,
  .product-image {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.6rem;

    i {
      font-size: 1.8em;
    }
  }

  .policy-text,
  .story-text {
    -webkit-line-clamp: 3;
    height: auto;
    max-height: 84px;
  }

  .product-name {
    height: auto;
    max-height: 48px;
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 20px 10px;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .policy-icon {
    width: 55px;
    height: 55px;

    i {
      font-size: 26px;
    }
  }

  .media-wrapper,
  .product-image {
    height: 160px;
  }
}
</style>